<script setup>
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();
const route = useRoute();

const goodsDetail = computed(() => store.state.goods.goodsDetail);
const filter = ref([]);

async function init(to) {
  await store.dispatch('goods/updateGoodsDetail', to.params.id);
  filter.value = goodsDetail.value.specs.map((s) => ({
    name: s.name,
    children: s.values.map((v) => ({
      name: v.name,
      disabled: false,
      selected: false,
    })),
  }));

  onChildClick(-1, -1);
}

// 初始化请求
init(route);
// 路由守卫
// 路由id变化时, 重新请求
onBeforeRouteUpdate(init);

function skuSomeCallback(sku, c, f, expect) {
  // 已有条件
  // sku.specs:
  // { name: '尺寸', valueName: '110cm' }
  // { name: '颜色', valueName: '黑色' }
  const skuMapping = {};
  sku.specs.forEach((s) => {
    skuMapping[s.name] = s.valueName;
  });

  // f.name: 颜色
  const di = expect.findIndex((e) => e.name === f.name);

  if (di > -1) {
    expect.splice(di, 1);
  }

  // skuMapping['颜色'] === '黑色'
  for (const condition of expect.concat({ name: f.name, valueName: c.name })) {
    // 颜色: condition.name
    // 黑色: condition.valueName
    // 黑色 >>> 黑色
    if (condition.valueName !== skuMapping[condition.name]) {
      return false;
    }
  }

  return true;
}

function skuSomeCallback1(sku, c, f) {
  // 20cm: c.name
  // 尺寸: f.name
  const skuMapping = {};
  sku.specs.forEach((s) => {
    skuMapping[s.name] = s.valueName;
  });

  return skuMapping[f.name] === c.name;
}

// 点击黑色时
function onChildClick(i, j) {
  if (i !== -1) {
    // 样式逻辑
    const currentSelected = filter.value[i].children[j].selected;
    filter.value[i].children.forEach((c) => {
      c.selected = false;
    });
    if (!currentSelected) {
      filter.value[i].children[j].selected = true;
    }
  }

  if (i !== -1 && filter.value[i].children[j].disabled) {
    filter.value[i].children[j].selected = false;
    return;
  }

  // sku逻辑
  const skus = goodsDetail.value.skus.filter((s) => s.inventory > 0);

  // 被选中的条件
  // f.name: 产地
  // const expect = [
  //   { name: '颜色', valueName: '蓝色' },
  //   { name: '尺寸', valueName: '30cm' }
  //   { name: '尺寸', valueName: '10cm' }
  // ];
  const expect = filter.value
    .filter((item) => item.children.some((citem) => citem.selected))
    .map((item) => ({
      name: item.name,
      valueName: item.children.find((citem) => citem.selected).name,
    }));

  const isUniqueSelected = expect.length === 1;

  for (let fi = 0; fi < filter.value.length; fi++) {
    if (fi === i) {
      continue;
    }

    const f = filter.value[fi];

    const hasSelected = fi === filter.value.findIndex((fitem) => fitem.children.some((citem) => citem.selected));

    for (let cj = 0; cj < f.children.length; cj++) {
      const c = f.children[cj];
      // c.name: 10cm

      // 目标: 设置正确的c.disabled
      // 只有一个选项时，当前这一排的disabled由库存中有没有决定
      // 如选择30cm时，10cm的选项的disabled应当由库存中有没有10cm的商品决定
      if (
        isUniqueSelected // 只有一个选项
        && hasSelected // 正好在当前这一行
        && cj !== f.children.findIndex((fitem) => fitem.selected) // 不是当前选中的
      ) {
        c.disabled = !skus.some((s) => skuSomeCallback1(s, c, f));
      } else {
        console.log(c.name);
        // 其它行的disabled由库存中有没有+当前条件决定
        c.disabled = !skus.some((s) => skuSomeCallback(s, c, f, expect));
      }
    }
  }
}

</script>

<template>
  <div
    class="filter-item"
    v-for="(f, i) in filter"
    :key="i"
  >
    {{ f.name }}
    <div
      class="filter-item-child"
      :class="{
        active: c.selected,
        disabled: c.disabled,
      }"
      v-for="(c, j) in f.children"
      :key="j"
      @click="onChildClick(i, j)"
    >
      {{ c.name }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.filter-item {
  margin-bottom: 10px;
}
.filter-item-child {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #aaa;
  padding: 5px 10px;

  &.active {
    border: 1px solid #f00;
  }

  &.disabled {
    border: 1px dashed #ddd;
  }
}
</style>
